<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="Name" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center" v-if="!scope.row.edit">
            <span style="margin-left: 10px">{{ scope.row.themeName }}</span>
          </div>
          <div style="display: flex; align-items: center" v-else>
            <el-input v-model="scope.row.themeName" placeholder="Please input theme's name" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="Detail" width="300">
        <template #default="scope">
          <div v-if="!scope.row.edit">{{ scope.row.themeDetails }}</div>
          <div style="display: flex; align-items: center" v-else>
            <el-input v-model="scope.row.themeDetails" placeholder="Please input theme's detail" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="Style" width="230">
        <template #default="scope">
          <div>
            <el-tag effect="plain" round>
              {{ scope.row.themeName }}
            </el-tag></div
          >
        </template>
      </el-table-column>
      <el-table-column label="Operations">
        <template #default="scope">
          <el-button
            size="small"
            v-if="!scope.row.edit"
            @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
          >
          <el-button size="small" v-if="scope.row.edit" @click="handleEdit(scope.$index, scope.row)"
            >Confirm</el-button
          >
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-button class="mt-4" style="width: 100%; margin-top: 30px" @click="onAddItem"
      >Add Item</el-button
    >
  </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import { getThemeList } from '../../../api/blog/themes';
  import { useForm } from 'vee-validate';
  //   数据请求
  const tableData = ref([]);
  //----------------定义校验规则----------------

  //----------------调用API----------------
  const getThemes = async () => {
    await getThemeList().then((res) => {
      tableData.value = res.data;
    });
  };
  //----------------生命周期控制----------------
  onMounted(() => {
    getThemes();
  });
  //----------------组件控制----------------
  /*
   *@description: 添加表格数据
   *@author: Mr.Tang
   *@date: 2024-02-03 17:54:07
   *@version: V1.0
   */
  const onAddItem = () => {
    tableData.value.push({
      themeName: 'Go',
      themeDetails: '高并发利器',
      edit: true,
    });
  };
  /*
   *@description: 处理修改表格数据
   *@author: Mr.Tang
   *@date: 2024-02-03 19:02:34
   *@version: V1.0
   */
  const handleEdit = (index, row) => {
    //修改 表格 行状态
    row.edit = !row.edit;
  };
  /*
   *@description: 处理删除表格数据
   *@author: Mr.Tang
   *@date: 2024-02-03 19:03:02
   *@version: V1.0
   */
  const handleDelete = (index, row) => {
    //根据提供下标删除数据
    console.log(index, row);
    tableData.value.splice(index, 1);
  };
  /*
   *@description: 保存数据
   *@author: Mr.Tang
   *@date: 2024-02-03 19:30:38
   *@version: V1.0
   */
  const handleSave = (row) => {};
</script>

<style></style>
